<template>
  <div class="c-bg-sgray c-fs28 c-pt20">
    <div class="c-bg-white c-pl24">
      <div class="c-flex-row c-aligni-center  c-hh90 c-pr24 c-bd-b1">
        <span class="c-fc-85 c-ww150">收件人</span>
        <input type="text" v-model="addressInfo.name" class="input-right c-fs28 c-flex-grow1 c-w0  c-fc-xblack" placeholder="收件人">
      </div>

      <div class="c-flex-row c-aligni-center c-hh90  c-pr24 c-bd-b1">
        <span class="c-fc-85 c-ww150">联系电话</span>
        <input type="tel" v-model="addressInfo.mobile" class="input-right c-flex-grow1 c-w0  c-fs28 c-fc-xblack" placeholder="联系电话">
      </div>

      <div class="c-flex-row c-aligni-center c-hh90  c-pr24 c-bd-b1">
        <span class="c-fc-85 c-ww150">所在地区</span>
        <div class="c-flex-row c-flex-grow1 c-w0 c-fs28  c-fc-xblack picker-address">
          <x-address :themeColor="$getThemeColor()" value-text-align='left' title="" v-model="addrValue" :list="addressData" raw-value placeholder="请选择地址" :show.sync="showAddress" class="c-flex-grow1"></x-address>
        </div>
      </div>

      <div class="c-flex-row c-aligni-center c-hh90  c-pr24 c-bd-b1">
        <span class="c-fc-85 c-ww150">详细地址</span>
        <input type="text" v-model="addressInfo.address" class="input-right c-fs28 c-flex-grow1 c-w0  c-fc-xblack" placeholder="街道、楼牌号等">
      </div>

      <div class="c-flex-row c-aligni-cente c-hh90  c-pr24 c-bd-b1">
        <span class="c-fc-85 c-flex-grow1 c-w0 c-flex-row c-aligni-center">设为默认地址</span>
        <x-switch :themeColor="$getThemeColor()" title="" :value-map="[false, true]" v-model="addressInfo.isDefult"></x-switch>
      </div>
    </div>

    <div class="c-hh80 c-fs30 c-mh24 c-fc-white theme-bg c-br10 c-lh80 c-textAlign-c c-mt64" @click="clickSave">保存地址</div>
  </div>
</template>

<script>
import { XSwitch, XAddress } from 'ckjrweb-mp-ui/src/components/index';
import { utilJs } from "@/utils/common.js";
let isClickIng = false;
export default {
  name: "AddressInfo",
  components: {
    XAddress,
    XSwitch
  },
  props: {
    fromPage:{
      type:String,
      default:'SHOP'
    },
    editAddressId:{
      type:String,
      default:'',
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      addressInfo: {
        no: 1,
        name: "",
        mobile: "",
        provinceId: "",
        cityId: "",
        areaId: "",
        address: "",
        postcode: "",
        isDefult: true
      },
      addrValue: [],
      showAddress: false,
      addressData: [] // addressData
    };
  },
  created() {
    if (this.fromPage != 'SHOP') {
      return;
    }
    utilJs.appShare(this);
  },
  methods: {
    clickSave() {
      if (isClickIng) {
        return;
      }
      if (!this.checkAddressInfo()) {
        return;
      }
      isClickIng = true;
      let that = this;
      let saveData = {
        addrId: this.$route.query.AddressId || this.editAddressId,
        name: this.addressInfo.name,
        mobile: this.addressInfo.mobile,
        provinceId: this.addrValue.length > 0 ? this.addrValue[0] : "",
        cityId: this.addrValue.length > 1 ? this.addrValue[1] : "",
        areaId: this.addrValue.length > 2 ? this.addrValue[2] : "",
        address: this.addressInfo.address,
        postcode: "",
        status: this.addressInfo.isDefult ? 1 : 2
      };
      utilJs.postMethod(global.apiurl + "address/save", saveData, res => {
        this.$showCjToast({
          text: "保存地址成功",
          type: "success",
        }).then(() => {
          if (that.fromPage == 'SHOP') {
            that.$router.go(-1);
          } else {
            that.$emit('saveAddressSuccess')
          }
        });
      });
    },
    checkAddressInfo() {
      if (!this.addressInfo.name) {
        this.$showCjToast({
          text: "收货人姓名不能为空",
          type: "warn",
        });
        return false;
      } else if (!utilJs.isPhoneNumber(this.addressInfo.mobile)) {
        this.$showCjToast({
          text: "请输入正确的手机号",
          type: "warn",
        });
        return;
      } else if (this.addrValue.length <= 0) {
        this.$showCjToast({
          text: "收货人地址不能为空",
          type: "warn",
        });
        return false;
      } else if (!this.addressInfo.address) {
        this.$showCjToast({
          text: "收货人详细地址不能为空",
          type: "warn",
        });
        return false;
      }
      return true;
    },
    getAddressDetail(addrId) {
      utilJs.getMethod(
        global.apiurl + "address/edit?addrId=" + addrId,
        res => {
          this.addressInfo = res;
          this.addrValue = [
            "" + res.provinceId,
            "" + res.cityId,
            "" + res.areaId
          ];
          this.addressInfo.isDefult = res.status == 1;
        }
      );
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    }
  },
  mounted() {
    isClickIng = false;
    if (this.fromPage == 'SHOP') {
      let titleText = this.$route.query.AddressId ? '编辑收货地址' : '新增收货地址';
      setDocumentTitle(titleText);
      this.wechatShare();
    }
    this.addressInfo = {
      no: 1,
      name: "",
      phone: "",
      province: "",
      city: "",
      area: "",
      detail: "",
      isDefult: true
    };
    utilJs.getMethod(`${global.apiurl}common/getAreaListForAgent`, res => {
      this.addressData = res.data;
      let addId = this.$route.query.AddressId || this.editAddressId;
      if (addId) {
        this.getAddressDetail(addId);
      } else {
        this.$store.commit('updateLoadingStatus', {
          isLoading: false
        });
      }
    }, failRes => {
    });
  },
  deactivated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.input-right {
  height: 100%;
  border: 0;
  background: none;
  outline: none;
}
.input-right:focus {
  outline: none;
}
.picker-address div {
  height: 100% !important;
  text-align: left !important;
}
</style>
